<div
    class="container"
    [style.background]="
        item?.info?.backdrop_path && item?.info?.backdrop_path.length > 0
            ? 'linear-gradient(to top, rgba(29,29,29,1) 0%, rgba(0,0,0,0.5) 100%), url(' +
              item?.info?.backdrop_path[0] +
              ') repeat-x'
            : 'none'
    "
>
    <div class="image">
        @if (item.info?.movie_image) {
            <img [src]="item.info?.movie_image" />
        } @else {
            <div class="placeholder-cover"></div>
        }
    </div>
    <div class="details">
        <h2>{{ item.info.name }}</h2>
        <label *ngIf="item.info.description">
            {{ item.info.description }}
        </label>
        <label *ngIf="item.info.releasedate">
            <div class="label">{{ 'XTREAM.RELEASE_DATE' | translate }}:</div>
            {{ item.info.releasedate }}
        </label>
        <label *ngIf="item.info.genre">
            <div class="label">{{ 'XTREAM.GENRE' | translate }}:</div>
            {{ item.info.genre }}
        </label>
        <label *ngIf="item.info.country">
            <div class="label">{{ 'XTREAM.COUNTRY' | translate }}:</div>
            {{ item.info.country }}
        </label>
        <div *ngIf="item.info.actors">
            <div class="label">{{ 'XTREAM.ACTORS' | translate }}:</div>
            {{ item.info.actors }}
        </div>
        <label *ngIf="item.info.director">
            <div class="label">{{ 'XTREAM.DIRECTOR' | translate }}:</div>
            {{ item.info.director }}
        </label>
        <label *ngIf="item.info.duration">
            <div class="label">{{ 'XTREAM.DURATION' | translate }}:</div>
            {{ item.info.duration }}
        </label>
        <label *ngIf="item.info.rating_imdb">
            <div class="label">{{ 'XTREAM.IMDB_RATING' | translate }}:</div>
            {{ item.info.rating_imdb }}
        </label>
        <label *ngIf="item.info.rating_kinopoisk">
            <div class="label">
                {{ 'XTREAM.KINOPOISK_RATING' | translate }}:
            </div>
            {{ item.info.rating_kinopoisk }}
        </label>
        <div class="action-buttons">
            <button
                mat-flat-button
                color="accent"
                (click)="playClicked.emit(item)"
            >
                <mat-icon>play_arrow</mat-icon>
                {{ 'XTREAM.PLAY' | translate }}</button
            >&nbsp;
            <button
                *ngIf="!isFavorite; else removeFromFavoritesButton"
                mat-stroked-button
                color="accent"
                (click)="toggleFavorite()"
            >
                <mat-icon>star_outline</mat-icon>
                {{ 'PORTALS.ADD_TO_FAVORITES' | translate }}
            </button>

            <ng-template #removeFromFavoritesButton>
                <button
                    mat-stroked-button
                    color="accent"
                    (click)="toggleFavorite()"
                >
                    <mat-icon>star</mat-icon>
                    {{ 'PORTALS.REMOVE_FROM_FAVORITES' | translate }}
                </button>
            </ng-template>
        </div>
    </div>
</div>
<div class="youtube-trailer" *ngIf="item.info.youtube_trailer">
    <h3>{{ 'XTREAM.YOUTUBE_TRAILER' | translate }}</h3>
    <iframe
        width="100%"
        height="450"
        [src]="
            'https://www.youtube.com/embed/' + item.info?.youtube_trailer | safe
        "
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerpolicy="strict-origin-when-cross-origin"
        allowfullscreen
    ></iframe>
</div>
